<template>
	<view>
		<view class="functionItem" @click="gotoAuthTiktokScopeDetail">
			<view class="left">
				<image class="icon" src="@/static/image/icon_auth_titok_user.png" mode=""></image>
				抖音账号授权
			</view>
			<view class="right">
				<text v-if="authTiktokInfo">{{appNickName}}</text>
				<text v-else>去授权</text>
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>
		<view class="functionItem" @click="gotoAuthTiktokPermission">
			<view class="left" >
				<image class="icon" src="@/static/image/icon_auth_titok_program.png" mode=""></image>
				抖音小雪花挂载权限
			</view>
			<view class="right">
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null

	export default {
		data() {
			return {
			};
		},

		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
				
				appAvatar: state => state.userInfo.appAvatar,
				appNickName: state => state.userInfo.appNickName,
				authTiktokInfo: state => state.userInfo.authTiktokInfo,
				authTiktokPermission: state => state.userInfo.authTiktokPermission,
			}),
		},

		onLoad(options) {
			that = this;
			

		},
		onShow() {

		},
		methods: {
			...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId', "setOrigin"]),
			gotoAuthTiktokScopeDetail(){
				uni.navigateTo({
					url:"/pages/shop/tiktok/authTiktokScopeDetail"
				})
			},
			
			gotoAuthTiktokPermission(){
				uni.navigateTo({
					url:"/pages/shop/tiktok/authTiktokPermission"
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>

<style lang="scss">
	.functionItem {
		width: 750rpx;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1px;

		.left {
			font-size: 30rpx;
			color: #333333;
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				// margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #999999;
			margin-right: 40rpx;

			.image {
				width: 16rpx;
				height: 22rpx;
				margin-left: 33rpx;
			}
		}
	}

</style>